<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>列表渲染</title>
	<script src="lib/js/vue.js"></script>
</head>
<body>
	<div id="myapp">
		<li v-for="name in group">
			{{ $index }}:{{ parentMessage }}{{ name.name}}前来报道！
		</li>
		<!-- 类似于template v-if，也可以将v-for用在<template>标签上，以渲染一个包含多个元素的块 -->
		<li v-for="value in object">
			{{ $key }}:{{ value }}
		</li>
		<!-- v-for也可以用于遍历对象，$key/$index特殊变量 -->
	</div>

	<script>
		var vm = new Vue({
			el: "#myapp",
			data: {
				parentMessage: '电信学院',	// 在v-for块内我们能完全访问父组件作用域内的属性，另有一个特殊变量$index，它是当前数组元素的索引
				group: [
					{ name: '王二狗' },
					{ name: '李大锤' },
					{ name: '赵日天' }
				],
				// 在控制台输入vm.group.push({name: '唐紫依'})能触发视图更新
				// Vue.js包装了被观察数组的变异方法，故能触发视图更新。被包装的方法有：
				// push(),pop(),shift(),unshift(),splice(),sort(),reverse()。
				object: {
					FirstName: 'john',
					LastName: 'Doe',
					Age: 30
				}
			}
		})
	</script>
</body>
</html>